<template>
  <section class="flex-row">
    <div style="margin-right: 10px;">
      <el-tree :data="data" :props="defaultProps" style="width: 12rem" @node-click="handleNodeClick">
      </el-tree>
    </div>
    <div>
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
          <el-form-item class="mb-10">
            <el-input size="small" v-model="filters.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item class="mb-10">
            <el-button size="small" type="danger" v-on:click="getUsers">查询</el-button>
          </el-form-item>
          <el-form-item class="mb-10">
            <el-button size="small" type="success" @click="handleAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
        style="width: 100%;">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" label="序号" min-width="60">
        </el-table-column>
        <el-table-column prop="username" label="用户名" min-width="120" sortable>
        </el-table-column>
        <el-table-column prop="status" label="所属车间" min-width="100" sortable>
        </el-table-column>
        </el-table-column>
        <el-table-column prop="status" label="所属分厂" min-width="100" sortable>
        </el-table-column>
        </el-table-column>
        <el-table-column prop="status" label="所属工厂" min-width="100" sortable>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="small" type="danger" @click="handleDel(scope.$index, scope.row)">删除</el-button>
            <el-button size="small" type="warning" @click="toPermission(scope.row)">权限分配</el-button>
          </template>
        </el-table-column>
      </el-table>
     <!-- <el-pagination style="text-align: right;" background layout="total,prev, pager, next"
        :current-page="pageNo" @current-change="handleCurrentChange" :page-size="pageSize" :total="total"></el-pagination> -->
    </div>

    <!--新增界面-->
    <el-dialog title="添加用户" :visible.sync='addFormVisible' :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="addForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="addForm.password" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="success" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

<!--    <div class="block">
      <el-pagination background layout="prev, pager, next" :current-page="pageNo" :total="1000"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div> -->

  </section>

</template>
<script>
  export default {
    name: 'test3',
    //组件创建
    created() {

    },
    mounted() {
      this.getUsers();
      this.getAllFactory();
    },
    data() {
      return {
        data: [],
        defaultProps: {
          label: 'name',
          children: 'list'
        },
        selectFacID:0,
        filters: {
          name: ''
        },
        pageNo: 1,
        pageSize: 10,
        users: [],
        total: 0,
        page: 1,
        listLoading: false,
        sels: [], //列表选中列

        editFormVisible: false, //编辑界面是否显示
        editLoading: false,
        editFormRules: {
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }]
        },
        //编辑界面数据
        editForm: {
          name: '',
          password: ''
        },

        addFormVisible: false, //新增界面是否显示
        addLoading: false,
        addFormRules: {
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }]
        },
        //新增界面数据
        addForm: {
          name: '',
          password: ''
        }

      }
    },
    methods: {
      toPermission(row){
        this.$router.push({
          // path: '/deviceConf',

          name: 'permissionSetting',
          query: {
            id: row.id,
          }
        })
      },
      getAllFactory() {
        var params = {
          // id: '',
        }
        this.api.get('/work/awbFactory/findFactoryTree').then((res) => {

          this.data = res.data.result;


        });
      },
      //获取用户列表
      getUsers() {
        if(!this.selectFacID){
          return
        }
        var params = {
          id: this.selectFacID
        }
        this.api.get('/work/awbFactory/findPersonListWithFactoryId',{params:params}).then((res) => {

          // this.data = res.data.result;
          this.users = res.data.result;

        });
      },
      handleCurrentChange(val) {
        this.pageNo = val;
        // this.getUsers();
      },
      //删除
      handleDel: function(index, row) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          //NProgress.start();
          var params = {
            factory_id: this.selectFacID,
            user_id: row.id,
          }
          this.api.post('/work/awbFactory/deleFactoryUser',params).then((res) => {
            this.listLoading = false;
            this.$message.success('操作成功');
            // this.data = res.data.result;
            this.getUsers();

          });
        }).catch(() => {

        });
      },
      //显示编辑界面
      handleEdit: function(index, row) {
        this.editFormVisible = true;
        this.editForm = Object.assign({}, row);

      },
      //显示新增界面
      handleAdd: function() {
        this.addFormVisible = true;

        this.addForm = {
          name: '',
          password: ''
        };
      },
      //编辑
      editSubmit: function() {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.addLoading = true;

              //
              var params = {
                factory_id: this.selectFacID,
                phone: this.editForm.username
              }
              this.api.post('/work/awbFactory/addFactoryUser',params).then((res) => {
                if(res){
                  this.addFormVisible = false;
                  this.$message.success('操作成功');
                  // this.data = res.data.result;
                  // this.getUsers();
                }
                this.addLoading = false;
              });

            });
          }
        });

      },
      //新增
      addSubmit: function() {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.addLoading = true;

              this.sendData()
            });
          }
        });
      },
      sendData(){
        var params = {
          factory_id: this.selectFacID,
          password: this.addForm.password,
          phone: this.addForm.name
        }
        this.api.post('/work/awbFactory/addFactoryUser',params).then((res) => {
          if(res){
            this.addFormVisible = false;
            this.$message.success('操作成功');
            // this.data = res.data.result;
            this.getUsers();
          }
          this.addLoading = false;

        });
      },
      selsChange: function(sels) {
        this.sels = sels;
      },
      //批量删除
      batchRemove: function() {
        var ids = this.sels.map(item => item.id).toString();
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          //NProgress.start();


        }).catch(() => {

        });
      },

      handleNodeClick(data) {
        this.selectFacID = data.id;
        this.getUsers();
      }

    }
  }
</script>
<style lang="less" scoped>

</style>
